<!--
 * @Author: sjt
 * @Date: 2022-10-25 13:18:12
 * @LastEditors: sjt
 * @LastEditTime: 2024-10-09 10:21:45
 * @Description: file content
-->
<template>
    <div style="position: relative; width: 100%; height: 104px; padding: 5px 0">
        <ul class="list">
            <li v-for="(item, index) in propData" :class="[index ? 'reds' : 'blues']">
                {{ item.value }}
            </li>
        </ul>
        <div class="bar2Chart" ref="bar2ChartRef"></div>
        <ul class="bottom-list">
            <li v-for="(item, index) in propData" :class="[index ? 'reds' : 'blues']">
                <img :src="list5Icon2" alt="" v-if="index">
                <img :src="list5Icon1" alt="" v-else>
                <span>{{ item.name }}</span>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { defineExpose, ref } from 'vue'
import * as echarts from 'echarts'
import icon from '@/assets/images/page2/line-icon.png'
import list5Icon1 from '@/assets/images/page2/list5-icon1.png'
import list5Icon2 from '@/assets/images/page2/list5-icon2.png'
let charts = null
const bar2ChartRef = ref(null)
let number = ref(0)
let propData = ref([])
const initChart = (datas) => {
    propData.value = datas
    let option = {
        // backgroundColor: '#000416',
        grid: { left: '0%', right: '0%', },
        xAxis: { type: 'value', show: false, },
        yAxis: {
            type: 'category',
            show: false,
            axisTick: {
                show: false
            },
        },
        series: [{
            type: 'bar',
            name: datas[0].name,
            data: [datas[0].value],
            stack: 'income',
            barWidth: 12,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        { offset: 0, color: 'rgba(2, 139, 255, 1)' },
                        { offset: 1, color: 'rgba(2, 139, 255, 0.2)' },
                    ])
                }
            },
            label: {
                show: false,
                position: 'left',
                offset: [0, 0],
                color: "#000",
                formatter: '{a}   {c}'
            },
        },
        {
            type: 'bar',
            name: datas[1].name,
            data: [datas[1].value],
            stack: 'income',
            barWidth: 12,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        { offset: 0, color: 'rgba(255, 204, 106, 1)' },
                        { offset: 1, color: 'rgba(255, 204, 106, 0.2)' },
                    ])
                }
            },
            label: {
                show: false,
                position: 'right',
                color: "#000",
                offset: [0, 0],
                formatter: '{c}   {a}'
            },
        }]
    }

    if (!charts) {
        charts = echarts.init(bar2ChartRef.value)
        charts.setOption(option)
    } else {
        charts.dispose()
        charts = echarts.init(bar2ChartRef.value)
        charts.setOption(option)
    }
    window.addEventListener('resize', () => {
        if (charts) {
            charts.resize()
        }
    })
}

defineExpose({
    initChart
})
</script>

<style lang="scss" scoped>
.bar2Chart {
    width: 100%;
    height: 28px;
    overflow: hidden;
    background-size: 100% 95%;

}

.title {
    right: 10px;
    top: 2px;
    position: absolute;
    font-family: AgencyFB-Bold;
    font-size: 1.0vh;
    text-shadow: 0 0 14px rgba(2, 139, 255, 0.56),
        0 0 14px rgba(2, 139, 255, 0.56);
}

.list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blues {
    font-family: AgencyFB-Bold;
    font-size: 1.1vh;
    text-shadow: 0 0 14px rgba(2, 139, 255, 0.56),
        0 0 14px rgba(2, 139, 255, 0.56);
}

.reds {
    font-family: AgencyFB-Bold;
    font-size: 1.1vh;
    text-shadow: 0 0 14px rgba(255, 154, 2, 0.56),
        0 0 14px rgba(255, 154, 2, 0.56);
}

.bottom-list {
    margin-top: -20px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;

    li {
        display: flex;
        align-items: center;

        img {
            width: 52px;
            height: 52px;
            margin-left: -10px;
        }

        span {
            margin-left: -10px;
            font-size: 0.8vh;
        }
    }
}
</style>